<template>
	<view class="content">
		<view class="container">
			<view class="orderContent">
				<view class="orderItem" v-for="item in cardInfo">
					<view class="info" @click="backToPayPage(item.id)">
						<view class="item">
							<view>
								{{item.account_name}}
							</view>
							<view>
								{{item.card_number}}
							</view>
						</view>
						<view class="item">
							<view>
								{{item.card_name}}
							</view>
							<view>
								{{item.branch_name}}
							</view>
						</view>
					</view>
					<view class="item edit">
						<view class="select" :class="item.is_default === 1? 'active' : ''"
							@click="toggleDefault(item,item.id)">
							<image src="../../static/active_a.png" mode="" v-if="item.is_default === 1">
							</image>
							<image src="../../static/active.png" mode="" v-else>
							</image>
							默认账号
						</view>
						<view>
							<text @click="deleteCard(item.id)">删除</text>
							<text @click="editCard(item.id)">编辑</text>
						</view>
					</view>
				</view>
				<view class="addCards" @click="toAddCards">
					添加银行卡
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardInfo: [],
				selectJduge: false
			};
		},
		onShow() {
			this.getCardList()
		},
		methods: {
			getCardList() {
				this.$api.post({
					url: "/store/getCardsByUserId",
					data: {
						user_id: uni.getStorageSync('xyvenue:user').id
					},
					success: res => {
						this.cardInfo = res;
					}
				});
			},
			toggleDefault(item, cardId) {
				uni.showModal({
					title: "是否要切换默认地址",
					success: () => {
						this.$api.post({
							url: '/store/editCardIsDefault',
							data: {
								user_id: uni.getStorageSync('xyvenue:user').id,
								card_id: cardId
							},
							success: res => {
								this.getCardList()
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								})
							}
						})
					}
				});
			},
			// 返回上一页
			backToPayPage(cardId) {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; // 获取上一页的页面实例
				if (prevPage) {
					prevPage.$vm.cardId = cardId; // 将卡片 id 传递给上一页
				}
				uni.navigateBack({
					delta: 1
				});
			},
			// 删除银行卡
			deleteCard(cardId) {
				// 检查是否是默认银行卡
				const defaultCard = this.cardInfo.find(card => card.is_default === 1);
				if (defaultCard && defaultCard.id === cardId) {
					uni.showModal({
						title: "无法删除",
						content: "至少要选择一个默认的银行卡，请先设置其他银行卡为默认。",
						showCancel: false
					});
					return;
				}
				uni.showModal({
					title: "是否确认删除该绑定的银行卡？",
					success: () => {
						this.$api.post({
							url: "/store/deleteBankCard",
							data: {
								id: cardId
							},
							success: res => {
								uni.showToast({
									title: "删除成功",
									icon: "none"
								});
								this.getCardList()
							}
						});
					}
				});
			},
			// 添加银行卡
			toAddCards() {
				uni.navigateTo({
					url: "/pages/store/addCards"
				});
			},
			// 编辑银行卡
			editCard(cardId) {
				uni.navigateTo({
					url: "/pages/store/addCards?cardId=" + cardId
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: #F4F4F4;
		min-height: 100vh;

		.container {
			padding-top: 40rpx;
		}
	}

	.orderContent {
		width: 90%;
		margin: auto;

		.info {
			padding-bottom: 10rpx;
			border-bottom: 2rpx solid #dedede;
		}

		.orderItem {
			margin-bottom: 40rpx;
			padding: 20rpx 40rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 0;
			}

			.edit {
				color: #A5A5A5;

				.select {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						padding-right: 10rpx;
					}
				}

				text {
					padding-left: 40rpx;
				}
			}

			.active {
				color: #65C61E;
			}
		}

		.addCards {
			background-color: #65C61E;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 90%;
			height: 85rpx;
			color: #fff;
			border-radius: 10rpx;
			position: fixed;
			bottom: 10%;
		}
	}
</style>